<template>
  <div id="login-bg">
    <img class="login-logo" src="../assets/bg2.png"/>
    <form @submit.prevent="submit">
     <div class="login-form">
       <ul>
         <li>
           <p class="login-text-1">用户登入</p>
           <p class="login-text-2">LOGIN</p>
         </li>
         <li>
           <div class="user-div">
             <label class="user-img"></label>
             <input class="login-input" v-model="username" placeholder="请输入用户名">
           </div>
         </li>
         <li>
           <div class="user-div">
             <label class="pass-img"></label>
           <input class="login-input" v-model="password" placeholder="请输入密码" type="password">
           </div>
         </li>
         <li>
           <button type="submit"></button>
         </li>
       </ul>
       <p></p>
     </div>
    </form>
      <p class="footer">北京新大陆时代教育科技有限公司<br/>
        copyright@2017-2020 Newland All Rights Reserved</p>
    </div>
</template>

<script>
  import {checkLoginUser} from '../apis/api'
  export default {
    data: function () {
      return {
        username: '',
        password: ''
      }
    },
    methods: {
      submit: function () { // TODO: 后端获取数据
        let _this = this
        let loginData = {user: _this.username, password: _this.password}
        checkLoginUser(loginData).then(function (res) {  // FIXME: 服务端验证
          sessionStorage.setItem('username', _this.username)
          sessionStorage.setItem('password', _this.password)
          sessionStorage.setItem('accessToken', 'login')
          sessionStorage.setItem('user', _this.username)
          _this.$router.push('/')
        }, function (res) {
          alert('用户名或密码错误')
        })
      }
    }
  }
</script>

<style scoped>
  #login-bg {
    background-color: #2A1F81;
    width: 100%;
    height: calc(100vh);
    overflow: hidden;
    min-height: 550px;
    min-width: 900px;
    position: relative;
    text-align: center;
  }

  .login-logo {
    width: 100%;
    height: auto;
  }

  form {
    width: 100%;
    position: absolute;
    top: 43%;
    height: auto;
    /*min-width: 1125px;*/
  }

  .login-form {
    width: 484px;
    height: 262px;
    margin: 0 auto;
    border: #bdbcbd solid;
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e0e0e0);
    box-shadow: 0 0 0 16px rgba(30,19,121,0.5);
    /*opacity: 0.5;*/
  }

  ul{
    list-style-type:none;
    padding: 20px 28px;
    overflow: auto;
  }

  li{
    position: relative;
    text-align: left;
    margin-bottom: 15px;
  }

  ul>li>.login-text-1 {
    font-size: 20px;
    color: #2a1f81;
    display: inline;
  }

  ul>li>.login-text-2 {
    font-size: 14px;
    color: #2a1f81;
    display: inline;
  }

  input {
    height: 100%;
    width: 361px;
    outline: none;
    font-size: 19px;
    color: #535353;
    padding-left: 10px;
  }

  button {
    background: url("../assets/login.png")  no-repeat center;
    width: 140px;
    height: 52px;
    float: right;
    outline: none;
    border: none;
  }

  .user-img {
    background: url("../assets/user.png") no-repeat center;
    width: 60px;
    height: 49px;
    float: left;
  }

  .pass-img {
    background: url("../assets/Key.png") no-repeat center;
    width: 60px;
    height: 49px;
    float: left;
  }

  .login-input {
    width: 348px;
    height: 44px;
  }

  .user-div {
    width: 423px;
    height: 49px;
    border: 1px solid #CBCCCD;
  }

  .footer {
    top: 90%;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #a8a8f6;
    font-size: 16px;
  }
</style>
